<template>
    <div id="contract_details">
        <div class="top">
            <!--审批步骤 -->
            <el-steps :space="200" :active="active" finish-status="success" :align-center="true" :simple="true">
                <el-step title="待申请"></el-step>
                <el-step title="待审核"></el-step>
                <el-step title="已通过"></el-step>
                <el-step title="已完成"></el-step>
            </el-steps>
        </div>
        <!--申请采购-->
        <el-dialog :visible.sync="addpurchaseVisible" width="50%" :close-on-click-modal="false" append-to-body>
            <add_purchase></add_purchase>
        </el-dialog>
        <!-- 生成采购单 -->
        <el-dialog :visible.sync="addorderVisible" width="50%" :close-on-click-modal="false" append-to-body>
            <add_order></add_order>
        </el-dialog>
        <!-- 申请采购详情 -->
        <div class="body">
            <el-row class="title">
                <el-col :span="4">申请采购</el-col>
                <el-col :span="5" :offset="15" v-if="detailData.appState === 0 && indexboolean">
                    <el-button @click="change_state(1)">同意</el-button>
                    <el-button @click="change_state(2)">驳回</el-button>
                </el-col>
                <el-col :span="4" :offset="16" v-else-if="detailData.appState === 3">
                    <el-button @click="open_add_order">生成采购单</el-button>
                </el-col>
                <el-col :span="4" :offset="16" v-else-if="detailData.appState === 2">
                    <el-button @click="open_add_purchase">申请采购</el-button>
                </el-col>
            </el-row>
            <el-form label-width="180px" style="overflow:hidden;padding-top:20px" >
                <el-form-item label="申请采购单单号：">
                    {{detailData.appCaiDan}}
                </el-form-item>
                <el-form-item label="申请人：">
                    {{detailData.emp.empName}}
                </el-form-item>
                <el-form-item label="申请日期：">
                    {{detailData.appDate}}
                </el-form-item>
                <el-form-item label="供货商：">
                    {{detailData.supplier.supplierName}}
                </el-form-item>
                <el-form-item label="采购总金额：">
                    {{detailData.appTotal}}元
                </el-form-item>
                <el-form-item label="订单状态：">
                    {{detailData.appState==0?"待审核":(detailData.appState==2?"未通过":(detailData.appState==3?"已通过":"已完成"))}}
                </el-form-item>
                <el-form-item label="备注：">
                    {{detailData.remark?detailData.remark:"无"}}
                </el-form-item>
            </el-form>
            <div style="margin-left: 20px">
                采购产品：
            </div>
            <el-table :data="detailData.appDetail" style="padding: 5px;">
                <el-table-column prop="proDetail.proDetailId" label="产品编号" align="center"></el-table-column>
                <el-table-column label="产品图片" prop="proDetail.proImgSrc" align="center">
                    <template slot-scope="s">
                        <el-image :src="s.row.proDetail.proImgSrc" style="width:50px;height:50px"></el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="proDetail.product.productName" label="产品名称" align="center"></el-table-column>
                <el-table-column prop="proDetail.product.productBrand" label="产品品牌" align="center"></el-table-column>
                <el-table-column prop="proDetail.product.proClassily.proClassilyName" label="产品分类" align="center"></el-table-column>
                <el-table-column prop="appCount" label="采购数量" align="center"></el-table-column>
                <el-table-column prop="appPrice" label="采购单价" align="center">
                    <template slot-scope="s">
                        <span>{{s.row.appPrice}}元</span>
                    </template>
                </el-table-column>
                <el-table-column prop="appTotal" label="采购总价" align="center">
                    <template slot-scope="s">
                        <span>{{s.row.appTotal}}元</span>
                    </template>
                </el-table-column>
                <el-table-column prop="proDetail.abilities" label="规格属性" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="s">
                        <span v-for="item in s.row.proDetail.abilities" :key="item.abilityId">{{item.abilityName}} </span>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
    import add_purchase from "./add_purchase";
    import add_order from "./add_order";

    export default {
        name:"purchase_detail",
        components:{
            add_purchase,add_order
        },
        data() {
           return {
               //详情页面的数据
               detailData: {},
               //新增申请采购单弹框状态
               addpurchaseVisible: false,
               //新增采购单弹框状态
               addorderVisible:false,
               //新增时自动生成的申请采购单单号
               appCaiDan:'',
               //是否能审批
               indexboolean:true,
           }
        },
        methods:{
            //查询此用户是否能审批
            findDuty(){
                this.axios.get("api/caigou/findDuty",{params:{"empId":this.$store.state.user.empId}})
                    .then(v=>{
                        this.indexboolean = v.data;
                    }).catch()
            },
            //生成申请采购单单号
            appcai_dan(){
                const now = new Date();
                const month = now.getMonth() + 1;
                const day = now.getDate();
                let no =  now.getFullYear()+(month<10? "0"+month:month )+(day<10?"0"+day:day);
                let ran = parseInt(Math.random()*10000000+1,10);
                String.prototype.padLeft =
                    Number.prototype.padLeft = function(total, pad) {
                        return (Array(total).join(pad || 0) + this).slice(-total);
                    };
                const str = ran.padLeft(8);
                const result = no+str;
                this.appCaiDan=result;
            },
            //打开申请采购弹框
            open_add_purchase(){
                this.appcai_dan();
                this.$store.dispatch("setVueAppCai",this);
                this.addpurchaseVisible = true;
            },
            //生成采购单
            open_add_order(){
                this.appcai_dan();
                this.$store.dispatch("setVueAppCai",this);
                this.addorderVisible = true;
            },
            //修改申请采购单状态
            change_state(index){
                this.axios.get("api/caigou/change-appcaistate",{params:{"judge":index,"appCaiId":this.detailData.appCaiId}}).then(()=>{
                    this.global.mes_success("操作成功");
                    if(index==1){
                        this.detailData.appState=3
                    }
                    if(index==2){
                        this.detailData.appState=2
                    }
                }).catch()
            }
       },
        computed:{
            //步骤条的数据
            active(){
                let a = 0;
                if (this.detailData.appState === 2){
                    a = 0
                }
                else if(this.detailData.appState === 0){
                    a = 1
                }
                else if(this.detailData.appState === 3){
                    a = 2
                }
                else if(this.detailData.appState === 1){
                    a = 3
                }
                return a
            },
        },
       created(){
            this.detailData = JSON.parse(sessionStorage.getItem("purchase"));
            sessionStorage.removeItem("purchase")
            this.findDuty();
        },
        /* 路由守卫 */
        beforeRouteEnter (to, from, next){
            if (sessionStorage.getItem("purchase")){
                next()
            }else{
                next({path:"/purchase_index"})
            }
        }
    }
</script>

<style scoped>
    #contract_details{margin: 0 auto; width: 1000px;}
    #contract_details .top{margin: 0 auto;width: 100%}
    .top .el-steps {background-color: #e9eef3;width:70%;margin-left: 120px}
    .body{background-color: #ffffff;width: 100%;}
    .title{border-bottom: 1.5px solid #ababab;margin:0 10px}
    .title .el-col{padding: 10px;font-size: 16px;line-height: 60px;}
</style>